<template>
  <div>
    <storeDiyForm :title="diyItem.name">
      <template #content>
        <storeDiyFormItem label="模板样式">
          <storeDiyFormTempBtn
            text="选择模板"
            type="user"
            v-model="diyItem.temp"
          >
          </storeDiyFormTempBtn>
        </storeDiyFormItem>
        <storeDiyFormItem label="登录标题文本">
          <el-input v-model="diyItem.data.login_text" />
        </storeDiyFormItem>

        <storeDiyFormItem label="登录提示文本">
          <el-input v-model="diyItem.data.login_desc" />
        </storeDiyFormItem>
      </template>
      <template #style>
        <storeDiyFormItem label="登录标题颜色">
          <storeDiyFormColorBtn
            v-model="diyItem.style.text_color"
          ></storeDiyFormColorBtn>
        </storeDiyFormItem>
        <storeDiyFormItem label="登录提示文字颜色">
          <storeDiyFormColorBtn
            v-model="diyItem.style.desc_color"
          ></storeDiyFormColorBtn>
        </storeDiyFormItem>
        <el-divider content-position="left">
          <div class="fw">其他设置</div>
        </el-divider>
        <storeDiyFormItem label="默认文字颜色">
          <storeDiyFormColorBtn
            v-model="diyItem.style.color"
          ></storeDiyFormColorBtn>
        </storeDiyFormItem>

        <storeDiyFormItem label="背景状态">
          <storeDiyFormSelectBtn
            v-model="diyItem.style.bg_status"
            :data="bgStatusData"
          ></storeDiyFormSelectBtn>
        </storeDiyFormItem>
        <storeDiyFormItem label="背景图片"  v-if="diyItem.style.bg_status == 1">
          <storeDiyFormImageBtn
            text="点击设置图片"
            v-model="diyItem.style.bg_img"
          >
          </storeDiyFormImageBtn>
        </storeDiyFormItem>
        <storeDiyFormItem label="背景颜色" v-if="diyItem.style.bg_status == 1">
          <storeDiyFormColorLinearBtn
            v-model:color="diyItem.style.bg"
            v-model:color2="diyItem.style.bg2"
          />
        </storeDiyFormItem>
        <storeDiyFormItem label="渐变角度" v-if="diyItem.style.bg_status == 1">
          <div class="editor-input-block">
            <div class="editor-input-desc">
              {{ diyItem.style.deg }}
            </div>
            <el-slider
              v-model="diyItem.style.deg"
              size="small"
              :min="0"
              :max="360"
            />
          </div>
        </storeDiyFormItem>
        <storeDiyFormItem
          label="背景上圆角"
          v-if="diyItem.style.bg_status == 1"
        >
          <div class="editor-input-block">
            <div class="editor-input-desc">
              {{ diyItem.style.t_radius }}px(像素)
            </div>
            <el-slider
              v-model="diyItem.style.t_radius"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
        <storeDiyFormItem
          label="背景下圆角"
          v-if="diyItem.style.bg_status == 1"
        >
          <div class="editor-input-block">
            <div class="editor-input-desc">
              {{ diyItem.style.b_radius }}px(像素)
            </div>
            <el-slider
              v-model="diyItem.style.b_radius"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
        <storeDiyFormItem
          label="背景投影样式"
          v-if="diyItem.style.bg_status == 1"
        >
          <storeDiyFormSelectBtn
            v-model="diyItem.style.shade"
            :data="imgShasdeData"
          ></storeDiyFormSelectBtn>
        </storeDiyFormItem>

        <el-divider content-position="left">
          <div class="fw">边距</div>
        </el-divider>

        <storeDiyFormItem label="外左边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.ml }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.ml"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>

        <storeDiyFormItem label="外右边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.mr }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.mr"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
        <storeDiyFormItem label="外上边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.mt }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.mt"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
        <storeDiyFormItem label="外下边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.mb }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.mb"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>

        <storeDiyFormItem label="内左边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.pl }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.pl"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
        <storeDiyFormItem label="内右边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.pr }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.pr"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>

        <storeDiyFormItem label="内上边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.pt }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.pt"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
        <storeDiyFormItem label="内下边距">
          <div class="editor-input-block">
            <div class="editor-input-desc">{{ diyItem.style.pb }}px(像素)</div>
            <el-slider
              v-model="diyItem.style.pb"
              size="small"
              :min="0"
              :max="60"
            />
          </div>
        </storeDiyFormItem>
      </template>

      <template #other>
        <el-divider content-position="left">
          <div class="fw">工具栏设置</div>
        </el-divider>

        <draggable v-model="diyItem.other.wallet.data" item-key="index">
          <template #item="{ element, index }">
            <storeDiyFormItems>
              <storeDiyFormDeleteBtn
                @click="onEditorDelele(index)"
              ></storeDiyFormDeleteBtn>
              <storeDiyFormItem label="标题" :hideAfter="true">
                <el-input v-model="element.title" />
              </storeDiyFormItem>
            </storeDiyFormItems>
          </template>
        </draggable>
      </template>
    </storeDiyForm>
  </div>
</template>
    <script lang="ts">
import { defineComponent } from "vue";
import draggable from "vuedraggable";
export default defineComponent({
  name: "storeDiyEditorPage",
  components: {
    draggable,
  },
});
</script>
    <script  lang="ts" setup >
import { ref, getCurrentInstance } from "vue";
import storeDiyForm from "@/components/diy/form/index.vue";
import storeDiyFormItem from "@/components/diy/form/item.vue";
import storeDiyFormItems from "@/components/diy/form/items.vue";
import storeDiyFormTempBtn from "@/components/diy/form/temp-btn.vue";
import storeDiyFormSelectBtn from "@/components/diy/form/select-btn.vue";
import storeDiyFormImageBtn from "@/components/diy/form/image-btn.vue";
import storeDiyFormLinkBtn from "@/components/diy/form/link-btn.vue";
import storeDiyFormColorBtn from "@/components/diy/form/color-btn.vue";
import storeDiyFormColorLinearBtn from "@/components/diy/form/color-linear-btn.vue";

import { diySelectDataType, diyUserDataType } from "@/types";

const props = withDefaults(
  defineProps<{
    diyItem?: diyUserDataType;
  }>(),
  {
    diyItem: () => {
      return {
        style: {
          color: "#000000",
          text_color: "#000000",
          desc_color: "#777777",
          bg_status: 0,
          bg_img: "",
          bg: "#FFFFFF",
          bg2: "#FFFFFF",
          deg: 48,
          shade: 0,
          mt: 0,
          mb: 0,
          ml: 0,
          mr: 0,
          pt: 0,
          pb: 0,
          pl: 0,
          pr: 0,
          t_radius: 0,
          b_radius: 0,
        },
        data: {
          login_text: "授权登录",
          login_desc: "可以体验更多",
          default: "",
        },
        other: {
          wallet: {
            show: 1,
            data: [],
          },
        },
      };
    },
  }
);

const isScrollData = ref<Array<diySelectDataType>>([
  {
    title: "否",
    value: 0,
  },
  {
    title: "是",
    value: 1,
  },
]);

const opacityData = ref<Array<diySelectDataType>>([
  {
    title: "透明",
    value: 1,
  },
  {
    title: "不透明",
    value: 0,
  },
]);

const statusData = ref<Array<diySelectDataType>>([
  {
    title: "显示",
    value: 1,
  },
  {
    title: "不显示",
    value: 0,
  },
]);

const colorData = ref<Array<diySelectDataType>>([
  {
    title: "白色",
    value: "#ffffff",
  },
  {
    title: "黑色",
    value: "#000000",
  },
]);
const imgShasdeData = ref<Array<diySelectDataType>>([
  {
    title: "常规",
    value: 0,
  },
  {
    title: "投影",
    value: 1,
  },
]);

const bgStatusData = ref<Array<diySelectDataType>>([
  {
    title: "显示",
    value: 1,
  },
  {
    title: "不显示",
    value: 0,
  },
]);

const emit = defineEmits(["onEditorAdd", "onEditorDelele"]);

/**
 * 编辑器：添加data元素
 */
const onEditorAddData = () => {
  emit("onEditorAdd", {
    count: 4,
  });
};

const onEditorDelele = (index: number) => {
  emit("onEditorDelele", {
    index,
    key: "data",
  });
};
</script>